import { defineComponent, h, ref } from 'vue'
import {
  DataTableColumns,
  NButton,
  NCard,
  NDataTable,
  NPagination,
  NTag,
  useMessage
} from 'naive-ui'
import dayjs from '@/utils/dayjs'
import {
  getAlarmRecordListData,
  readAlarmRecordById
} from '@/service/modules/integration-monitor'
import styles from '@/views/integration/monitor/index.module.scss'

const infoAlarmRecord = defineComponent({
  name: 'infoAlarmRecord',
  setup() {
    type RowData = {
      id: number | string
      triggerLogId: number | string
      who: number | string
      collectionId: number | string
      hiveDatabase: number | string
      hiveTableName: number | string
      collectionName: number | string
      ruleComputeName: number | string
      msg: number | string
      createTime: number | string
      ifSend: number | string
      ifRead: number | string
    }

    const createColumns = ({
      goRead
    }: {
      goRead: (rowData: RowData) => void
    }): DataTableColumns<RowData> => {
      return [
        { title: 'ID', key: 'id' },
        { title: '触发Id', key: 'triggerLogId' },
        { title: '触发者', key: 'who' },
        { title: '集合Id', key: 'collectionId' },
        { title: 'hive数据库', key: 'hiveDatabase' },
        { title: 'hive表名', key: 'hiveTableName' },
        { title: '集合名称', key: 'collectionName' },
        { title: '规则名称', key: 'ruleComputeName' },
        {
          title: '报警信息',
          key: 'msg',
          width: 500
        },
        {
          title: '距今',
          key: 'createTime',
          render(row: any) {
            // @ts-ignore
            return dayjs(row.createTime).fromNow()
          }
        },
        {
          title: '是否发送',
          key: 'ifSend',
          render(row: any) {
            if (row.ifSend) {
              return <NTag type={'success'}>已发送</NTag>
            } else {
              return <NTag type={'warning'}>未发送</NTag>
            }
          }
        },
        {
          title: '是否已读',
          key: 'ifRead',
          render(row: any) {
            return h(
              NButton,
              {
                size: 'small',
                onClick: () => goRead(row)
              },
              { default: () => (row.ifRead ? '已读' : '未读') }
            )
          }
        }
      ]
    }

    const alarmRecordList = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        getAlarmRecordList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        getAlarmRecordList()
      }
    })

    const message = useMessage()

    const getAlarmRecordList = function () {
      pagination.value.loading = true
      getAlarmRecordListData(pagination.value.page, pagination.value.pageSize)
        .then((res: any) => {
          alarmRecordList.value = res.data.records
          pagination.value.pageCount = Math.ceil(
            res.data.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    getAlarmRecordList()

    return {
      columns: createColumns({
        goRead(rowData) {
          // @ts-ignore
          readAlarmRecordById(rowData.id)
            .then((res: any) => {
              message.success(res.msg ? res.msg : '已读成功')
              getAlarmRecordList()
            })
            .catch((err: any) => {
              message.error(err.msg ? err.msg : '接口未知错误')
            })
        }
      }),
      alarmRecordList,
      pagination,
      message,
      getAlarmRecordList
    }
  },
  render() {
    return (
      <NCard>
        <NDataTable
          columns={this.columns}
          data={this.alarmRecordList}
          loading={this.pagination.loading}
        ></NDataTable>
        <NPagination
          class={styles['page-position']}
          display-order={['quick-jumper', 'pages', 'size-picker']}
          page-count={this.pagination.pageCount}
          page-size={this.pagination.pageSize}
          page-sizes={this.pagination.pageSizes}
          page={this.pagination.page}
          on-update:page={this.pagination.onUpdatePage}
          on-update:page-size={this.pagination.onUpdatePageSize}
          show-quick-jumper
          show-size-picker
        ></NPagination>
      </NCard>
    )
  }
})

export default infoAlarmRecord
